<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>社团列表</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- 可选的Bootstrap主题文件（一般不用引入） -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="/css/font-awesome.css">
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/bootstrap-treeview.css">
    <link rel="stylesheet" href="/css/djs.css">

    <script src="/js/user.js"></script>
    <script type="text/javascript" src="/js/base.js"></script>
    <script type="text/javascript" src="/js/bootstrap-treeview.js"></script>
</head>
<body>
<div id="top">

</div>
<div class="container">
    <div id="asideAffix" class="aside" data-spy="affix">
    </div>
    <div class="content" style="margin-top: 0;">
        <div class="col-sm-4" style="padding-left:0; padding-right:10px; width:25%;">
            <h2>机构列表</h2>
            <div id="treeview1" class="treeview" style=" border-top-width: 0;">
            </div>
        </div>
        <div class="page-volunteer-recruitment-grid col-sm-8" style="padding:0; width:75%;">
            <div class="page-searchbox">
                <input type="text" placeholder="输入查询条件">

                <div class="pull-right" style="width: 260px;">
                    <button class="btn btn-primary" id="search"
                            style="border-color: #ffd632;background: #ffd632 linear-gradient(to bottom,#ffd632 0,#ffd632 100%);text-align: center;width: 121px;height: 46px;">
                        查询
                    </button>
                </div>
            </div>
            <table id="groupList" class="table table-bordered table-hover table-striped " style="margin-top: 0;">

            </table>
        </div>
    </div>
</div>
<div class="checkbox" style="display: none;">
    <label>
        <input type="checkbox" class="checkbox" id="chk-select-multi" value="false">
        Multi Select
    </label>
</div>
</body>

<script type="text/javascript">

    var statusStr = function (data) {
        if (data == 0) {
            return "解冻";
        }
        return "冻结";
    };

    var statusStrUn = function (data) {
        if (data == 10) {
            return "冻结";
        }
        return "解冻";
    };

    var tableHead = "<tr class='trh'><td>社团名称</td><td>公益时间</td><td>成员数量</td><td>活动数量</td><td>负责人</td><td>联系电话</td><td>状态</td></tr>";

    var listStr = function (data) {
        return "<tr><td style='color: #57718a;cursor:pointer' onclick='groupInfo(" + data.id + ")'>" + data.name + "</td><td>" + data.times + "</td><td style='color: #57718a;cursor:pointer' " +
                "onclick='userList(" + data.id + ")'>" + data.volunteers + "</td><td style='color: #57718a;cursor:pointer' " +
                "onclick='activityList(" + data.id + ")'>" + data.actvitys + "</td><td>" + data.monitor + "</td><td>" +
                data.phone + "</td><td>" + statusStr(data.delStatus) + "</td></tr>";
    };

    $("#create").click(function () {
        location.href = "/html/org/orgEdit.html";
    });

    function edit(orgId) {
        location.href = "/html/org/orgEdit.html?orgId=" + orgId;
    }

    function groupInfo(orgId) {
        location.href = "/html/group/groupInfo.html?orgId=" + orgId;
    }

    function userList(id){
       location.href = "/html/group/groupVolunteerList.html?groupId=" + id;
    }

    function activityList(id){
        location.href = "/html/group/groupActivityList.html?groupId=" + id;
    }

    function changeStatus(orgId) {
        $.ajax({
            url: '/org/updateStatus',// 跳转到 action
            headers: {'Content-type': 'application/json;charset=UTF-8'},//传入数据数据格式 json
            data: JSON.stringify({
                orgId: orgId
            }),
            type: 'post',
            cache: false,
            dataType: 'json',
            success: function (data) {
                if (data.statusCode == 0) {
                    location.href = "/html/org/orgList.html";
                } else {
                    alert(data.statusMessage);
                }
            },
            error: function () {
                // view("异常！");
                alert("用户未登录或者服务器连接异常！");
                location.href = "/html/login/login.html";
            }
        });
    }

    function nodeTree(list,orgId){
        var arr=[];
        var obj={};
        list.forEach(function(item){
            item.href=item.orgId;
            item.text=item.orgName;
            obj[item.orgId]=item;
            if(item.orgId===orgId){
                arr.push(item);
                return
            }
            if(item.orgParent){
                if(!obj[item.orgParent].nodes){
                    obj[item.orgParent].nodes=[];
                }
                obj[item.orgParent].nodes.push(item);
            }

        });
        console.log(arr);
        return arr;
    }

    var treedata;
    function getTreeData(){
        $.ajax({
            url: '/org/test',// 跳转到 action
            headers: {'Content-type': 'application/json;charset=UTF-8'},//传入数据数据格式 json
            data: JSON.stringify({}),
            type: 'post',
            cache: false,
            dataType: 'json',
            success: function (data) {
                if (data.statusCode == 0) {
                    treedata = nodeTree(data.data,JSON.parse(localStorage.getItem("user")).orgId);
                    setTreeView(treedata);
                } else {
                    alert(data.statusMessage);
                }
            },
            error: function () {
                // view("异常！");
                alert("用户未登录或者服务器连接异常！");
                location.href = "/html/login/login.html";
            }
        });
    }

    function setTreeView(data){
        $('#treeview1').treeview({
            data: data,
            multiSelect: $('#chk-select-multi').is(':checked'),
            onNodeSelected: function(event, node) {
                putGroupList(node.orgId);
            }
//            ,
//            onNodeUnchecked: function (event, node) {
//                alert('<p>' + node.text + ' was unchecked</p>');
//            }
        });
    }


    $('#chk-select-multi:checkbox').on('change', function () {
        console.log('multi-select change');
        $selectableTree = initSelectableTree();
        selectableNodes = findSelectableNodes();
    });

    var initSelectableTree = function() {
        return $('#treeview-selectable').treeview({
            data: treedata,
            multiSelect: $('#chk-select-multi').is(':checked'),
            onNodeSelected: function(event, node) {
                $('#selectable-output').prepend('<p>' + node.text + ' was selected</p>');
            },
            onNodeUnselected: function (event, node) {
                $('#selectable-output').prepend('<p>' + node.text + ' was unselected</p>');
            }
        });
    };

    var findSelectableNodes = function() {
        return $selectableTree.treeview('search', [ $('#input-select-node').val(), { ignoreCase: false, exactMatch: false } ]);
    };

    function putGroupList(orgId){
        $.ajax({
            url: '/group/listByOrg',// 跳转到 action
            headers: {'Content-type': 'application/json;charset=UTF-8'},//传入数据数据格式 json
            data: JSON.stringify({
                orgId:orgId
            }),
            type: 'post',
            cache: false,
            dataType: 'json',
            success: function (data) {
                if (data.statusCode == 0) {
                    $("#groupList").empty();
                    $("#groupList").append(tableHead);
                    for (var i = 0; i < data.data.length; i++) {
                        $("#groupList").append(listStr(data.data[i]));
                    }
                } else {
                    alert(data.statusMessage);
                }
            },
            error: function () {
                // view("异常！");
                alert("用户未登录或者服务器连接异常！");
                location.href = "/html/login/login.html";
            }
        });
    }

    $(
            function () {
                getTreeData();
                putGroupList(JSON.parse(localStorage.getItem("user")).orgId);
            }
    );
</script>
</html>